<template>
    <div class="container">
        <div class="side-bar">
            <h2>
                规则名称
                <router-link class="bnt-blue bnt-disabled" to="">新增</router-link>
                <!--<a href="javascript:;" class="bnt-blue">新增</a>-->
            </h2>
            <ul>
                <li>
                    <router-link :class="{active: active ==='default' }" to="/rule">默认规则</router-link>
                </li>
                <li v-for="it in rules">
                    <router-link class="delitem"
                                 :to="{path: `/rule/${it.uuid}` }"
                                 :class="{active: active == it.uuid}" >
                        {{it.ruleName}}
                        <span class="icon-guanbi del"></span>
                    </router-link>
                </li>
            </ul>
        </div>

        <div class="main">
            <router-view></router-view>
        </div>
    </div>
</template>

<script>

    export default {
        data () {
            return {
                active          : this.$route.params.id || 'default',
                edit            : false,
                rules           : [],
            }
        },
        watch : {
            '$route' (to) {
                to.params && to.params.id ? (this.active = to.params.id) : (this.active = 'default');
            }
        },

        created () {
            this.rulesGroup();
        },

        methods : {
            //加载规则列表
            async rulesGroup () {
                let res  = await this.api.rules('100202');
                this.rules = res.data;
            }
        },
    }
</script>
